<template>
    <RouterView />
    <van-tabbar v-model="active" v-if="showTab" route active-color="red">
        <van-tabbar-item icon="home-o" to="/admin">
            <template #icon="props">
                <img :src="props.active ? icon.active1 : icon.inactive1"   :class="{'icon': true, 'icon-active': props.active}"/>
            </template></van-tabbar-item>
        <van-tabbar-item icon="search" to="/application">
            <template #icon="props">
                <img :src="props.active ? icon.active2 : icon.inactive2"   :class="{'icon': true, 'icon-active': props.active}"/>
            </template></van-tabbar-item>
        <van-tabbar-item icon="friends-o" to="/message">
            <template #icon="props">
                <img :src="props.active ? icon.active3 : icon.inactive3"   :class="{'icon': true, 'icon-active': props.active}"/>
            </template></van-tabbar-item>
        <van-tabbar-item icon="setting-o" to="/my">
            <template #icon="props">
                <img :src="props.active ? icon.active4 : icon.inactive4"   :class="{'icon': true, 'icon-active': props.active}"/>
            </template></van-tabbar-item>
    </van-tabbar>
</template>

<script setup lang='js'>
import { ref, reactive, computed } from 'vue'
import adminStore from '@/store/admin'
import {icon} from './hooks'

const myadminStore = adminStore()
const active = ref(0)
const showTab = computed(() => myadminStore.showTabbar)
</script>
<style lang='scss' scoped>
.icon {
    width: 20px;
    height: 20px;
}
.icon-active{
    width: 50px;
    height: 50px;
}
</style>